<%-- 
    Document   : PlaceDetail
    Created on : Jul 26, 2013, 1:43:43 PM
    Author     : TOSHIBA
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Place Details</title>
        <link type="text/css" rel="stylesheet" href="stylesheet.css">
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/themes/type_04.css">
        <link rel="stylesheet" href="css/themes/color_13.css">

    </head>
    <body>
    <header class="sixteen columns">
        <div id="logo">
            <h1>Bui travel</h1>
        </div>
        <hr />
    </header>

    <c:if test="${not empty PLACE}">
        <div class="container">
            <div id="work">
                <div id="overview" class="sixteen columns">
                    <h3>${PLACE.name}</h3>
                    <input type="button" value="Edit" id="btnEditTitle" name="btnEditTitle" onclick="editTitle()"/>
                    <hr />
                </div>
            </div>
            <form id="formEditPicture" action="EditPlace" method="POST" enctype="multipart/form-data">
                <div>
                    <img src="images/${PLACE.picturePath}"/>                    
                    <input type="file" name="fileImage" value="" accept="image/*" onchange="editPicture();"/>
                </div>
            </form>

            <br/>
            <form id="formEdit" action="EditPlace" method="POST">
                <h5>Description</h5>
                <span id="description">${PLACE.placeDescription}</span>
                <textarea id="txtDescription" name="txtDescription" rows="4" cols="20" style="display: none"></textarea>
                <h5>Address</h5>
                <span id="address">${PLACE.placeAddress}</span>
                <input type="text" id="txtAddress" name="txtAddress" value="" style="display: none"/>
                <h5>Phone</h5>
                <span id="phone">${PLACE.placePhone}</span>
                <input type="text" id="txtPhone" name="txtPhone" value="" style="display: none"/>                
                <div>
                    <input type="button" value="Edit" id="btnEdit" name="btnEdit" onclick="editText()"/>
                </div>
                <div>
                    <input type="button" value="Submit" name="btnSubmit" id="btnSubmit" style="display: none" onclick="preSubmitText('formEdit')"/>
                </div>
            </form>

        </div>
    </c:if>


    <div>
        <table>
            <tr>
                <td> <%--Cot Tag Tot dep--%>
                    <table>
                        <c:forEach var="tag" items="${PLACE.tags.tag}">
                            <tr>
                                <c:if test="${tag.tagType}">
                                    <td>${tag.tagName}</td>
                                    <td style="color:lightblue" >
                                        <input type="text" name="txtPoint" value="${tag.point}" id="txtPoint${tag.placeTagID}"/> rates
                                        <input type="hidden" name="txtTag_Place_ID" value="${tag.placeTagID}"/>
                                    </td>
                                    <td>
                                        <input type="button"
                                               value="Rate"
                                               name="btAction"
                                               onclick="updatePoint(${tag.placeTagID} , ${PLACE.id})"
                                               id="btRate${tag.placeTagID}" />
                                    </td>
                                    <c:if test="${not empty ISADMIN}">
                                        <td>
                                            <a href="AddTagServlet?placeID=${PLACE.id}&btAction=Delete&placeTagID=${tag.placeTagID}">
                                                <img src="images/favicons/delete.png" width="20px" height="20px" alt="delete"/>
                                            </a>
                                        </td>
                                    </c:if>

                                </c:if>
                            </tr>
                        </c:forEach>
                    </table>
                </td>
                <td><%--Cot Tag Xau Xa--%>
                    <table>
                        <c:forEach var="tag" items="${PLACE.tags.tag}">
                            <tr>
                                <c:if test="${not tag.tagType}">
                                    <td>${tag.tagName}</td>
                                    <td style="color:lightblue" >
                                        <input type="text" name="txtPoint" value="${tag.point}" id="txtPoint${tag.placeTagID}"/> rates
                                        <input type="hidden" name="txtTag_Place_ID" value="${tag.placeTagID}"/>
                                    </td>
                                    <td>
                                        <input type="button"
                                               value="Rate"
                                               name="btAction"
                                               onclick="updatePoint(${tag.placeTagID} , ${PLACE.id})"
                                               id="btRate${tag.placeTagID}" />
                                    </td>
                                    <c:if test="${not empty ISADMIN}">
                                        <td>
                                            <a href="AddTagServlet?placeID=${PLACE.id}&btAction=Delete&placeTagID=${tag.placeTagID}">
                                                <img src="images/favicons/delete.png" width="20px" height="20px" alt="delete"/>
                                            </a>
                                        </td>
                                    </c:if>
                                </c:if>
                            </tr>
                        </c:forEach>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <c:if test="${not empty ISADMIN}">
        <div>
            <hr/><br/>
            Tag insert must have both prefix and name of tag:
            PREFIX +: Good tag <br/>
            PREFIX -: Bad tag <br/>
            Tags are separated by comma.
            Example: +Cheap, +Delicious, -Boring, -Dirty

            <form action="AddTagServlet">
                <input type="text" name="txtListTag" value="" />
                <input type="submit" value="Add Tags" name="btAction" />
                <input type="hidden" name="placeID" value="${PLACE.id}" />
            </form>
        </div>
    </c:if>

    <hr/>
    <c:import url="LoadComment.jsp"/>
</body>

<script type="text/javascript">
    function editPicture() {
        document.getElementById('formEditPicture').submit(); 
    }

    function editText() {
        // Description
        var spanValue = document.getElementById('description').innerHTML;
        document.getElementById('description').style.display = 'none';
        document.getElementById('txtDescription').value = spanValue;
        document.getElementById('txtDescription').style.display = 'inline';
        // Phone
        spanValue = document.getElementById('phone').innerHTML;
        document.getElementById('phone').style.display = 'none';
        document.getElementById('txtPhone').value = spanValue;
        document.getElementById('txtPhone').style.display = 'inline';
        // Address
        spanValue = document.getElementById('address').innerHTML;
        document.getElementById('address').style.display = 'none';
        document.getElementById('txtAddress').value = spanValue;
        document.getElementById('txtAddress').style.display = 'inline';

        document.getElementById('btnSubmit').style.display = 'inline';
        document.getElementById('btnEdit').style.display = 'none';
    }

    function preSubmitText(formID) {
        // Check for validation
        var prevent = "script";
        var input = document.getElementById(formID).getElementsByTagName("input");
        var pass = true;
        for (var i = 0; i < input.length; i++) {
            if (input[i].type == "text") {
                var text = input[i].value;
                if ((text.indexOf(prevent) != -1) || (text.length == 0)) {
                    input[i].style.background = '#FF6F6F';
                    pass = false;
                } else {
                    input[i].style.background = 'white';
                }
            }
        }

        // Create request object
        if (!pass) {
            return false;
        }

        var answer = window.confirm("Are you sure want you save this location?");
        if (!answer) {
            return false;
        }
        submit();
    }

    function submit() {
        // Description
        var spanValue = document.getElementById('txtDescription').value;
        var formData = "description="+spanValue;
        document.getElementById('description').style.display = 'inline';
        document.getElementById('description').innerHTML = spanValue;
        document.getElementById('txtDescription').style.display = 'none';
        // Phone
        spanValue = document.getElementById('txtPhone').value;
        formData += "&phone=" + spanValue;
        document.getElementById('phone').style.display = 'inline';
        document.getElementById('phone').innerHTML = spanValue;
        document.getElementById('txtPhone').style.display = 'none';
        // Address
        spanValue = document.getElementById('txtAddress').value;
        formData += "&address=" + spanValue;
        document.getElementById('address').style.display = 'inline';
        document.getElementById('address').innerHTML= spanValue;
        document.getElementById('txtAddress').style.display = 'none';
        // Button
        document.getElementById('btnSubmit').style.display = 'none';
        document.getElementById('btnEdit').style.display = 'inline';
        formData += "&btnAction=editText&placeID=" + ${param.placeID};
        // Send request to server
        var request = new XMLHttpRequest();        
        request.open("POST","EditPlace",true);
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(formData);       
    }
</script>

<script>
    var request = null;
    var place_tag_ID = 0;

    function updatePoint(placeTagID, placeID)
    {
        var txtPoint = document.getElementById("txtPoint"+placeTagID);
        place_tag_ID = placeTagID;
        request = new XMLHttpRequest();
        var url = "Controller";
        var formdata = "txtTag_Place_ID="+placeTagID
            + "&txtPoint="+ txtPoint.value+"&txtPlaceID="+ placeID+"&btAction=Rate";
        request.open("GET", url + '?' + formdata, true);
        request.onreadystatechange = updateScoreResult;
        //khi dung post phai them dong nay:
        // request.setRequestHeader("Content-Type", "application/x-www-urlencoded");
        request.send(null);
        //   txtPoint.value=Number(txtPoint.value)+Number('1');
    }
    function updateScoreResult() {
        if (request.readyState== 4) {
            if (request.status==200) {
                //Chua Rated
                if (request.responseText=="Success") {
                    var txtPoint = document.getElementById("txtPoint"+place_tag_ID);
                    txtPoint.value=Number(txtPoint.value)+Number('1');
                    var btRate = document.getElementById("btRate"+place_tag_ID);
                    btRate.value = "Rated";
                    btRate.disabled = true;
                } else if (request.responseText=="Exist") {
                    alert("Please Rate again in 24h");
                    var btRate = document.getElementById("btRate"+place_tag_ID);
                    btRate.value = "Rated";
                    btRate.disabled = true;
                }
            }

        }
    }
</script>
</html>
